<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%">
</div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var option;

    var customerName = "[[${customer}]]";

    // Fetch data from the API
    fetch('http://127.0.0.1:8099/api/data?customer='+customerName)
        .then(response => response.json())
        .then(p => {
            let xAxisData = [];
            var dataList = [];
            var customerNameList = p.nameList;
            for (let i = 1; i <= 12; i++) {
                xAxisData.push(i+"月");
            }
            var customerMap = p.customerVolMap;
            console.log(customerMap)
            for (let i = 0; i < customerNameList.length; i++) {
                var a = {
                    name: customerNameList[i],
                    type: 'bar',
                    stack: i/10,
                    emphasis: emphasisStyle,
                    data: customerMap[customerNameList[i]]
                };
                dataList.push(a);
            }


            var emphasisStyle = {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0,0,0,0.3)'
                }
            };

            option = {
                legend: {
                    data: customerNameList,
                    left: '10%'
                },
                brush: {
                    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                    xAxisIndex: 0
                },
                toolbox: {
                    feature: {
                        magicType: {
                            type: ['stack']
                        },
                        dataView: {}
                    }
                },
                tooltip: {},
                xAxis: {
                    data: xAxisData,
                    name: '月份',
                    axisLine: { onZero: true },
                    splitLine: { show: false },
                    splitArea: { show: false }
                },
                yAxis: {},
                grid: {
                    bottom: 100
                },
                series: dataList
            };

            myChart.setOption(option);


            window.addEventListener('resize', myChart.resize);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
</script>
</body>
</html>